<%--
 * @Author: 抱著羊啃 1437670973@qq.com
 * @Date: 2025-05-26 16:48:07
 * @LastEditors: 抱著羊啃 1437670973@qq.com
 * @LastEditTime: 2025-05-28 23:22:21
 * @FilePath: \demo1\src\main\webapp\MainPage\functionPage\reader.jsp
 * @Description: 小说閱讀頁面 - 後端渲染版本
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="org.example.demo1.Entity.*" %>
<%@ page import="org.example.demo1.DAO.*" %>
<%@ page import="org.example.demo1.utils.MybatisUtils" %>
<%@ page import="org.apache.ibatis.session.SqlSession" %>
<%@ page import="java.util.*" %>

<%
    // 獲取URL參數
    String novelIdStr = request.getParameter("novelId");
    String chapterIdStr = request.getParameter("chapterId");
    
    Novel novel = null;
    Chapter currentChapter = null;
    ChapterContent chapterContent = null;
    List<Chapter> allChapters = new ArrayList<>();
    Chapter prevChapter = null;
    Chapter nextChapter = null;
    String errorMessage = null;
    
    if (novelIdStr != null && chapterIdStr != null) {
        try {
            int novelId = Integer.parseInt(novelIdStr);
            int chapterId = Integer.parseInt(chapterIdStr);
            
            // 獲取數據庫連接
            SqlSession sqlSession = MybatisUtils.getSqlSession();
            NovelDao novelDao = sqlSession.getMapper(NovelDao.class);
            
            try {
                // 獲取小說信息
                novel = novelDao.getNovelById(novelId);
                
                // 獲取章節內容
                chapterContent = novelDao.getChapterContentByChapterId(chapterId);
                
                // 獲取所有章節列表
                Map<String, Object> params = new HashMap<>();
                params.put("novelId", novelId);
                params.put("chapterStatus", 0); // 只獲取已發布的章節
                allChapters = novelDao.getAllChaptersByNovelId(params);
                
                // 找到當前章節和前后章节
                for (int i = 0; i < allChapters.size(); i++) {
                    Chapter chapter = allChapters.get(i);
                    if (chapter.getChapter_id().equals(chapterId)) {
                        currentChapter = chapter;
                        if (i > 0) {
                            prevChapter = allChapters.get(i - 1);
                        }
                        if (i < allChapters.size() - 1) {
                            nextChapter = allChapters.get(i + 1);
                        }
                        break;
                    }
                }
                
            } finally {
                sqlSession.close();
            }
            
        } catch (NumberFormatException e) {
            errorMessage = "無效的參數格式";
        } catch (Exception e) {
            errorMessage = "加载数据时发生错误: " + e.getMessage();
        }
    } else {
        errorMessage = "缺少必要的参数";
    }
%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= currentChapter != null ? currentChapter.getChapter_title() + " - " + (novel != null ? novel.getNovel_name() : "小说阅读") : "小说阅读" %></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
            transition: all 0.3s ease;
        }
        
        /* 夜间模式 */
        body.night-mode {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }
        
        .reader-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .novel-header {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        
        .night-mode .novel-header {
            background: #2d2d2d;
            color: #e0e0e0;
        }
        
        .chapter-content {
            background: white;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            line-height: 2;
            font-size: 16px;
            text-align: justify;
            transition: all 0.3s ease;
        }
        
        .night-mode .chapter-content {
            background: #2d2d2d;
            color: #e0e0e0;
        }
        
        .chapter-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            text-align: center;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }
        
        .night-mode .chapter-title {
            color: #e0e0e0;
            border-bottom-color: #4a90e2;
        }
        
        .navigation {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .night-mode .navigation {
            background: #2d2d2d;
        }
        
        .nav-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .nav-btn:hover {
            background-color: #0056b3;
            color: white;
            text-decoration: none;
        }
        
        .nav-btn:disabled {
            background-color: #6c757d;
            cursor: not-allowed;
        }
        
        .chapter-info {
            text-align: center;
            color: #666;
        }
        
        .night-mode .chapter-info {
            color: #b0b0b0;
        }
        
        .error-message {
            background: white;
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            color: #dc3545;
            font-size: 18px;
        }
        
        /* 已读章节样式 */
        .read-chapter {
            color: #6c757d !important;
            opacity: 0.7;
        }
        
        /* 阅读器工具栏 */
        .reader-toolbar {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
            padding: 10px;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .night-mode .reader-toolbar {
            background: #2d2d2d;
        }
        
        .toolbar-btn {
            display: block;
            width: 60px;
            height: 60px;
            margin: 5px 0;
            border: none;
            border-radius: 8px;
            background: #f8f9fa;
            color: #333;
            font-size: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
        }
        
        .toolbar-btn:hover {
            background: #007bff;
            color: white;
            text-decoration: none;
        }
        
        .night-mode .toolbar-btn {
            background: #404040;
            color: #e0e0e0;
        }
        
        .toolbar-btn i {
            display: block;
            font-size: 18px;
            margin-bottom: 2px;
        }
        
        .toolbar-btn.active {
            background: #007bff;
            color: white;
        }
        
        .toolbar-btn.active:hover {
            background: #0056b3;
        }
        
        /* 目录侧边栏 */
        .catalog-sidebar {
            position: fixed;
            left: -350px;
            top: 0;
            width: 350px;
            height: 100vh;
            background: white;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            z-index: 1001;
            transition: left 0.3s ease;
            overflow-y: auto;
        }
        
        .catalog-sidebar.show {
            left: 0;
        }
        
        .night-mode .catalog-sidebar {
            background: #2d2d2d;
        }
        
        .catalog-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .night-mode .catalog-header {
            border-bottom-color: #404040;
        }
        
        .catalog-list {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .catalog-item {
            padding: 12px 20px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .catalog-item:hover {
            background-color: #f8f9fa;
        }
        
        .catalog-item.current {
            background-color: #007bff;
            color: white;
        }
        
        .night-mode .catalog-item {
            border-bottom-color: #404040;
        }
        
        .night-mode .catalog-item:hover {
            background-color: #404040;
        }
        
        /* 字号调整 */
        .font-size-small { font-size: 14px; }
        .font-size-medium { font-size: 16px; }
        .font-size-large { font-size: 18px; }
        .font-size-xlarge { font-size: 20px; }
        
        /* 遮罩层 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
            display: none;
        }
        
        .overlay.show {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    
    <!-- 目录侧边栏 -->
    <div class="catalog-sidebar" id="catalogSidebar">
        <div class="catalog-header">
            <h5 class="mb-0">目录</h5>
            <button class="btn btn-sm btn-outline-secondary" onclick="closeCatalog()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <ul class="catalog-list" id="catalogList">
            <% if (allChapters != null && !allChapters.isEmpty()) { %>
                <% for (Chapter chapter : allChapters) { %>
                    <li class="catalog-item <%= chapter.getChapter_id().equals(Integer.parseInt(chapterIdStr)) ? "current" : "" %>"
                        onclick="goToChapter(<%= novel != null ? novel.getNovel_id() : 0 %>, <%= chapter.getChapter_id() %>)">
                        第<%= chapter.getChapter_number() %>章 <%= chapter.getChapter_title() %>
                    </li>
                <% } %>
            <% } %>
        </ul>
    </div>
    
    <!-- 阅读器工具栏 -->
    <div class="reader-toolbar">
        <button class="toolbar-btn" id="bookshelfBtn" onclick="toggleBookshelf()">
            <i class="far fa-bookmark"></i>
            <span>加书架</span>
        </button>
        
        <button class="toolbar-btn" onclick="toggleCatalog()">
            <i class="fas fa-list"></i>
            <span>目录</span>
        </button>
        
        <button class="toolbar-btn" id="nightModeBtn" onclick="toggleNightMode()">
            <i class="fas fa-moon"></i>
            <span>夜间</span>
        </button>
        
        <button class="toolbar-btn" onclick="adjustFontSize()">
            <i class="fas fa-font"></i>
            <span>字号</span>
        </button>
        
        <button class="toolbar-btn" onclick="downloadChapter()">
            <i class="fas fa-download"></i>
            <span>下载</span>
        </button>
    </div>

    <div class="reader-container">
        <% if (errorMessage != null) { %>
            <div class="error-message">
                <h3>加载失败</h3>
                <p><%= errorMessage %></p>
                <a href="javascript:history.back()" class="btn btn-primary">返回上一页</a>
            </div>
        <% } else if (novel != null && currentChapter != null && chapterContent != null) { %>
            <!-- 小说信息头部 -->
            <div class="novel-header">
                <h2 class="mb-1"><%= novel.getNovel_name() %></h2>
                <p class="text-muted mb-0">作者：<%= novel.getUsername() != null ? novel.getUsername() : "未知作者" %></p>
            </div>
            
            <!-- 章节内容 -->
            <div class="chapter-content" id="chapterContent">
                <h1 class="chapter-title"><%= currentChapter.getChapter_title() %></h1>
                <div class="content">
                    <%= chapterContent.getContent().replace("\n", "<br>") %>
                </div>
            </div>
            
            <!-- 导航按钮 -->
            <div class="navigation">
                <% if (prevChapter != null) { %>
                    <a href="reader.jsp?novelId=<%= novel.getNovel_id() %>&chapterId=<%= prevChapter.getChapter_id() %>" class="nav-btn">
                        ← 上一章：<%= prevChapter.getChapter_title() %>
                    </a>
                <% } else { %>
                    <span class="nav-btn" style="background-color: #6c757d; cursor: not-allowed;">← 已是第一章</span>
                <% } %>
                
                <div class="chapter-info">
                    <small>第 <%= currentChapter.getChapter_number() %> 章</small><br>
                    <small>字数：<%= currentChapter.getWord_count() != null ? currentChapter.getWord_count() : "未知" %></small>
                </div>
                
                <% if (nextChapter != null) { %>
                    <a href="reader.jsp?novelId=<%= novel.getNovel_id() %>&chapterId=<%= nextChapter.getChapter_id() %>" class="nav-btn">
                        下一章：<%= nextChapter.getChapter_title() %> →
                    </a>
                <% } else { %>
                    <span class="nav-btn" style="background-color: #6c757d; cursor: not-allowed;">已是最后一章 →</span>
                <% } %>
            </div>
            
            <!-- 返回按钮 -->
            <div class="text-center mt-3">
                <a href="page.jsp?novelId=<%= novel.getNovel_id() %>" class="btn btn-outline-primary">返回章节列表</a>
            </div>
        <% } else { %>
            <div class="error-message">
                <h3>内容不存在</h3>
                <p>请求的章节内容不存在或已被删除</p>
                <a href="javascript:history.back()" class="btn btn-primary">返回上一页</a>
            </div>
        <% } %>
    </div>
    
    <!-- 引入jQuery和Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入阅读记录功能 -->
    <script src="reader.js"></script>
    
    <!-- 传递数据到JavaScript -->
    <script>
        window.readerData = {
            novelId: <%= novelIdStr != null ? novelIdStr : "null" %>,
            chapterId: <%= chapterIdStr != null ? chapterIdStr : "null" %>,
            novelName: '<%= novel != null ? novel.getNovel_name().replace("'", "\\'") : "" %>'
        };
    </script>
</body>
</html>
